<template>
    <div class="sidebar">
        <!-- router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
            <template v-for="item in sideMenuNavigation">
                <!-- 判断一级菜单下是否有二级菜单，有则执行这里-->
                <template v-if="item.children&&(!item.role||item.role==role)">
                    <el-submenu :key="item.parentId" :index="item.parentId">
                        <!--  一级菜单标题展示区域  -->
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.electGradeName }}</span>
                        </template>
                        <!--二级菜单循环-->
                        <template v-for="subItem in item.children">
                            <!-- 判断二级菜单下是否有三级菜单，有则执行这里 -->
                            <el-submenu
                                v-if="subItem.grandchildren&&(!subItem.role||subItem.role==role)"
                                :key="subItem.id"
                                :index="subItem.id"
                            >
                                <!-- 二级菜单标题展示区域  -->
                                <template slot="title">{{ subItem.spareAndReplacementHouse }}</template>
                                <!-- 三级菜单循环 -->
                                <el-menu-item
                                    v-for="threeItem in subItem.grandchildren"
                                    :key="threeItem.eqiId"
                                    :index="threeItem.eqiId"
                                >{{ threeItem.equipmentSpare }}</el-menu-item>
                            </el-submenu>
                            <!-- 判断二级菜单下是否有三级菜单，无则执行这里 -->
                            <el-menu-item
                                 v-else-if="(!subItem.role||subItem.role==role)"
                                :key="subItem.id"
                                :index="subItem.id"
                            >{{subItem.spareAndReplacementHouse}}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <!-- 判断一级菜单下是否有二级菜单，无则执行这里 -->
                <template v-else>
                    <!--  一级菜单标题展示区域   -->
                    <el-menu-item :index="item.parentId" :key="item.parentId">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.electGradeName }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    export default {
        name: "sidebar",
        data () {
            return {
                role:"",
                collapse: false,
                sideMenuNavigation: []
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/','');
            }
        },
        created() {
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
        },
        mounted() {
            let info = JSON.parse(sessionStorage.getItem('userinfo')) || null;
            this.role = info.role;
            this.menuBar()
        },
        methods: {
            menuBar () {
                this.$http.get("./static/menuBar.json").then(res =>{
                    if (res.status !== 200) return;
                    this.sideMenuNavigation = res.data.navigationTree
                }).catch(()=>{})
            }
        }
    }
</script>

<style lang="scss" scoped>
.sidebar {
    height: 100%;
    background: #324157;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    box-sizing: border-box;
    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
        height: 100%;
        box-sizing: border-box;
    }
    /deep/.el-menu {
        border-right: none;
    }
}

</style>